<!--万能表单模块-->
<template>
  <div class="sea-gap-group">

    <!-- 根节点是特殊的 -->
    <el-dropdown style="outline: none" :popper-options="popper_options">
        <span class="text-black" style="border: 0">
          <strong>{{ root.label }}</strong>
        </span>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(sub, i) in root.children" :key="i">
            <el-dropdown-item @click="getMenusList(sub)">{{ sub.label }}</el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 菜单列表 -->
    <template v-for="(item, idx) in menus" :key="idx">
      <span>{{ separator }}</span>
      <el-dropdown style="outline: none" :popper-options="popper_options">
        <span class="text-black" style="border: 0">
          <strong>{{ item.label }}</strong>
        </span>
        <template #dropdown v-if="item.children">
          <el-dropdown-menu>
            <template v-for="(sub, i) in item.children" :key="i">
              <el-dropdown-item @click="getMenusList(sub)">{{ sub.label }}</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import Bamboo from "@/lang/bamboo/index";
import TreeNode from "@/lang/bamboo/tree-node";
import setting from "@/widget/provider/setting";
import {usePopperOptions} from "@/widget/use/use-popper-options.js";

/**
 * 面包屑
 *
 * 更加智能的面包屑，支持树形结构的数据，增加了下拉选项，允许进行切换选择。
 *
 * 简单地说：就是水平展示的菜单栏。
 */
const props = defineProps({
    // 数据字典
    options: {type: [Array, String], default: undefined}
    // 分隔符
    , separator: {type: String, default: '/'},
})

// 树形工具
const builder = Bamboo.builder();
// 根节点
const root = ref({});
// 界面的数据模型
const menus = ref([]);

const popper_options = usePopperOptions();

const getMenusList = (menu) => {
    let node = builder.getNodeById(menu.id);
    let array = [node];
    while (true) {
        node = node.getParent();
        if (node !== undefined) {
            array.push(node);
        } else {
            break;
        }
    }
    array.reverse();
    menus.value = array;
};

// 初始化
{
    let initialTree = builder
        .setMapper(Bamboo.defaultMapper)
        .setParents(props.options)
        .groupBy()
        .getRoot();

    const rootNode = new TreeNode();
    rootNode.setLabel('ROOT');
    rootNode.setChildren(initialTree);

    root.value = rootNode;
    getMenusList(initialTree[0]);
}
</script>


<style scoped>

.el-dropdown,
.el-dropdown * {
    outline: none;
}

/* 或者针对特定的触发元素，如 el-dropdown-link */
.el-dropdown-link:focus-visible,
.el-dropdown-link:focus {
    outline: unset;
}
</style>